<template>
  <view class="form-index">
    <u-navbar :border-bottom="false" :is-back="isBack" :title="navTitle" :custom-back="customBack" />
    <u-subsection :animation="false" :list="list" :current="current" buttonColor="#7463EA" active-color="#fff"
      inactive-color="#7463EA" @change="sectionChange" />
    <view>
      <TodoMy ref="TodoMy" @folder="onFolder" v-if="current === 0" :type="current" :title="navTitle" />
      <FormMy ref="FormMy" @folder="onFolder" v-if="current === 1" :type="current" :title="navTitle" />
    </view>
  </view>
</template>

<script>
  import FormMy from "./filled/index.vue";
  import TodoMy from "./todo/index.vue"
  export default {
    components: {
      FormMy,
      TodoMy
    },
    onPullDownRefresh() {
      if (this.current === 1) {
        this.$refs.FormMy.onSearch();
      } else {
        this.$refs.TodoMy.onSearch();
      }
    },
    data() {
      return {
        isBack: false,
        navTitle: "普通表单",
        list: [{
            name: "待填写",
          },
          {
            name: "已填写",
          },
        ],
        current: 0,
      };
    },
    methods: {
      sectionChange(index) {
        this.navTitle = this.list[index].name;
        this.current = index;
      },
      onFolder(e) {
        this.navTitle = e;
        this.isBack = true;
      },
      customBack() {
        this.isBack = false;
        this.navTitle = this.list[this.current].name;
        this.$refs.FormMy.onBack();
      },
    },
  };
</script>
<style lang="scss">
  page {
    background-color: $u-bg-color;
  }
</style>
<style lang="scss" scoped>
  .form-index {
    padding: 27.17rpx;
  }

  ::v-deep(.u-subsection) {
    height: 54.35rpx !important;
    border-radius: 18.12rpx !important;
    padding: 0 !important;
    background-color: #fff !important;

    .u-item-text {
      font-size: 25.36rpx !important;
    }

    .u-item-bg {
      height: 54.35rpx !important;
      border-radius: 18.12rpx !important;
      bottom: 0 !important;
      box-shadow: 0 7.25rpx 18.12rpx 1.81rpx rgba(0, 0, 0, 0.3);
      margin-left: -3px;
    }
  }
</style>
